<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./WEB-INF/templates/template.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:param name="headerText" value="Add Step"></ui:param>

    <ui:define name="content"> 

        <script>
             function redirect(id){
                 if (document.getElementById("titleMsg").getElementsByTagName("span").length == 0){
                     window.location='editTutorial.xhtml?tutorial=' + id;
                     return true;
                 }
             }
        </script>
        <h:form id="form" prependId="false">
            <p:panel header="Step Data">

                <h:panelGrid columns="3">
                    <h:outputLabel for="title" value="Title: " />
                    <p:inputText id="title" value="#{editStepBB.title}" label="Title">
                        <f:ajax event="blur" render="titleMsg" />
                    </p:inputText>
                    <p:message id="titleMsg" for="title" />
                </h:panelGrid>

                <h:panelGrid columns="3">
                    <h:outputLabel for="text" value="Text: " />
                    <p:inputTextarea id="text" value="#{editStepBB.text}" label="Text">
                        <f:ajax event="blur" render="textMsg" />
                    </p:inputTextarea>
                    <p:message id="textMsg" for="text" />
                </h:panelGrid>

            </p:panel>

            <p:commandButton
                value="Save Step"
                actionListener="#{editStepBB.saveStep()}"
                oncomplete="redirect(#{editStepBB.tutorialID})" />

        </h:form>
    </ui:define>
</ui:composition>